<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>SDUT酒店管理系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
    <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
    <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
    <!--LOADING STYLESHEET FOR PAGE-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
    <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
    <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
    <!--新增加的css样式-->
    <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
    <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script src="/static/js/lrz/lrz.bundle.js" th:src="@{/js/lrz/lrz.bundle.js}"></script>
    <style>
        /*  弹框样式 */
        body .dialog{
            font-size:14px}
        .dialog{
            width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101}
        .dialog .title{background-color:#33485C;padding:10px;color:#fff;font-weight:bold}
        .dialog .title img{float:right;margin-top: -8px;margin-right: -10px}
        .dialog .content{background-color:#fff;padding:25px;height:80px}
        .dialog .content img{float:left}
        .dialog .content span{float:left;padding-top:10px;padding-left:10px}
        .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee}
        .mask {width:100%;height:100%; background-color:rgba(0,0,0,0.4);position:absolute;
            top:0px;left:0px;display:none;z-index:100}
        /*列表值居中*/
        .table tr td{
            text-align: center;
        }
    </style>
</head>
<body class=" ">
<div>
    <!--BEGIN BACK TO TOP-->
    <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
    <!-- 引用头部 -->
    <div th:replace="common/top::topFragment"></div>
    <!--END TOPBAR-->
    <div id="wrapper">
        <!-- 引用左菜单导航栏 -->
        <div th:replace="common/leftToolBar::leftToolbar"></div>
        <!--END CHAT FORM-->
        <!--BEGIN PAGE WRAPPER-->
        <div id="page-wrapper">
            <!-- 引用工具条 -->
            <div th:replace="common/toolBar::toolBar"></div>
            <!--END TITLE & BREADCRUMB PAGE-->
            <!--BEGIN CONTENT-->
            <!--右侧区内容的编写 -->
            <div class="page-content">
                <!-- 功能操作内容 -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="portlet box">
                            <div class="portlet-header">
                                <div class="caption">房间设置</div>
                                <div class="actions"><a href="javascript:openAddRoom()" class="btn btn-info btn-xs"><i class="fa fa-plus"></i>&nbsp;
                                    新增房间</a>&nbsp;
                                    <!--<div class="btn-group"><a href="#" data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle"><i class="fa fa-wrench"></i>&nbsp;
                                        Tools</a>-->
                                        <!-- 将数据导出到excel-->
                                        <!--  <ul class="dropdown-menu pull-right">
                                              <li><a href="#">Export to Excel</a>
                                              </li>
                                              <li><a href="#">Export to CSV</a>
                                              </li>
                                              <li><a href="#">Export to XML</a>
                                              </li>
                                              <li class="divider"></li>
                                              <li><a href="#">Print Invoices</a>
                                              </li>
                                          </ul>-->
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="row mbm">
                                    <div class="col-lg-12">
                                        <div style="display: none;" class="alert alert-danger tb-alert-error">
                                            <button type="button" data-dismiss="alert" aria-hidden="true" class="close">×</button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                        <div style="display: none" class="alert alert-success tb-alert-success">
                                            <button type="button" data-dismiss="alert" aria-hidden="true" class="close">×</button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                    </div>
                                </div>

                                <div class="row mbm">
                                    <div class="col-lg-6">
                                        <div class="pagination-panel">页码 &nbsp;
                                            <!--如果只有一页那么上一页就要加disabled--->
                                            <a href="javaScript:void(0)" class="btn btn-sm btn-default btn-prev gw-prev"><i class="fa fa-angle-left"></i></a>&nbsp;
                                            <input type="text" maxlenght="5" th:value="${pageInfo.pageNum}" class="pagination-panel-input form-control input-mini input-inline input-sm text-center gw-page">&nbsp;
                                            <a href="#" class="btn btn-sm btn-default btn-prev gw-next"><i class="fa fa-angle-right"></i></a>&nbsp; 共 <span id="page">[[${pageInfo.pages}]]</span> | 视图 &nbsp;
                                            <select class="form-control input-xsmall input-sm input-inline gw-pageSize">
                                                <option value="5" selected="selected">5</option>
                                                <option value="10" th:selected="${pageSize==10}">10</option>
                                                <option value="20" th:selected="${pageSize==20}">20</option>
                                                <option value="50" th:selected="${pageSize==50}">50</option>
                                                <option value="-1" th:selected="${pageSize==-1}">All</option>
                                            </select>&nbsp; 记录 | 一共找到<span id="total">[[${pageInfo.total}]]</span>项记录</div>
                                    </div>

                                </div>
                                <table class="table table-hover table-striped table-bordered table-advanced tablesorter">
                                    <thead>
                                    <tr>
                                        <!-- <th width="3%">
                                             <div class="icheckbox_minimal-grey" style="position: relative;"><input type="checkbox" class="checkall" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                         </th>-->
                                        <th width="8%" class="header">序号</th>
                                        <th width="8%" class="header">房间号</th>
                                        <th width="8%" class="header">客房图片</th>
                                        <th width="10%" class="header">客房类型</th>
                                        <th width="10%" class="header">客房状态</th>
                                        <th width="10%" class="header">所在楼层</th>
                                        <th width="8%" class="header">标准客房/天（普）</th>
                                        <th width="8%" class="header">标准客房/小时（普）</th>
                                        <th width="8%" class="header">标准客房/天（VIP）</th>
                                        <th width="8%" class="header">标准客房/小时（VIP）</th>
                                        <th width="10%" class="header">操作</th>
                                    </tr>
                                     <form id="form1" action="/room/toRoomSet?pageNum=1" method="post">
                                        <!--查询列表-->
                                        <tr role="row" class="filter">
                                            <td></td>
                                            <td>
                                                <input autocomplete="off" id="room_id" th:name="roomId" th:value="${roomQueryVo.roomId}" type="text" class="form-control form-filter input-sm" placeholder="输入房间号">
                                            </td>
                                            <td>
                                                <!-- <input type="text" class="form-control form-filter input-sm">-->
                                            </td>
                                            <td>
                                                <!--<input type="text" class="form-control form-filter input-sm">-->
                                                <select id="room_type_id" th:name="roomType.roomTypeId" th:value="${roomQueryVo.roomType.roomTypeId}" class="form-control input-sm">
                                                    <option value="">--请选择--</option>
                                                    <option th:selected="${roomQueryVo.roomType.roomTypeId eq rType.roomTypeId}" th:each="rType : ${roomTypeLists}" th:value="${rType.roomTypeId}" th:text="${rType.typeName}"></option>
                                                </select>
                                            </td>
                                            <td>
                                                <select id="status_id" th:name="status.statusId" th:value="${roomQueryVo.status.statusId}" class="form-control input-sm">
                                                    <option value="">--请选择--</option>
                                                    <option th:selected="${roomQueryVo.status.statusId eq sta.statusId}" th:each="sta:${statusLists}" th:value="${sta.statusId}" th:text="${sta.statusName}"></option>

                                                </select>
                                            </td>
                                            <td>
                                                <select id="floor_id" th:name="floor.floorId" th:value="${roomQueryVo.floor.floorId}" class="form-control input-sm">
                                                    <option value="">--请选择--</option>
                                                    <option th:selected="${roomQueryVo.floor.floorId eq flr.floorId}" th:each="flr:${floorLists}" th:value="${flr.floorId}" th:text="${flr.floorName}"></option>
                                                </select>
                                            </td>
                                            <td>
                                                <div class="mbs">
                                                    <input id="priceDayStart" name="priceDayStart" th:value="${roomQueryVo.priceDayStart}" type="text" placeholder="From" class="form-control input-sm mbs">
                                                </div>
                                                <input id="priceDayEnd" th:name="priceDayEnd" th:value="${roomQueryVo.priceDayEnd}"  type="text" placeholder="To" class="form-control input-sm">
                                            </td>
                                            <td>
                                                <div class="mbs">
                                                    <input id="priceHourStart" th:name="priceHourStart" th:value="${roomQueryVo.priceHourStart}" type="text" placeholder="From" class="form-control input-sm mbs">
                                                </div>
                                                <input id="priceHourEnd" th:name="priceHourEnd" th:value="${roomQueryVo.priceHourEnd}" type="text" placeholder="To" class="form-control input-sm">
                                            </td>
                                            <td>
                                                <div class="mbs">
                                                    <input id="VIPDayStart"  th:name="VIPDayStart" th:value="${roomQueryVo.VIPDayStart}" type="text" placeholder="From" class="form-control input-sm mbs">
                                                </div>
                                                <input id="VIPDayEnd" th:name="VIPDayEnd" th:value="${roomQueryVo.VIPDayEnd}" type="text" placeholder="To" class="form-control input-sm">
                                            </td>
                                            <td>
                                                <div class="mbs">
                                                    <input id="VIPHourStart" th:name="VIPHourStart" th:value="${roomQueryVo.VIPHourStart}" type="text" placeholder="From" class="form-control input-sm mbs">
                                                </div>
                                                <input id="VIPHourEnd" th:name="VIPHourEnd" th:value="${roomQueryVo.VIPHourEnd}" type="text" placeholder="To" class="form-control input-sm">
                                            </td>
                                            <td>
                                                <div class="mbs">
                                                    <button type="submit" class="btn btn-xs btn-success filter-submit"><i class="fa fa-search"></i>&nbsp; Search
                                                    </button>
                                                </div>
                                                <button type="reset" onclick="resetValue()" class="btn btn-xs btn-info filter-cancel"><i class="fa fa-times"></i>&nbsp; Reset
                                                </button>
                                            </td>
                                        </tr>
                                     </form>


                                    </thead>
                                    <tbody>
                                    <tr th:each="room,itRoom : ${pageInfo.getList()}">
                                        <!--<td>
                                            <div class="icheckbox_minimal-grey" style="position: relative;"><input type="checkbox" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                        </td>-->
                                        <td th:text="${itRoom.count}"></td>
                                        <td th:text="${room.roomId}"></td>
                                        <td>

                                            <img  th:src="@{/static/upload/roomImgs/}+${room.roomImage}" th:width="36px" th:height="36px" alt="">

                                        </td>
                                        <td th:text="${room.roomType.typeName}"></td>
                                        <td th:text="${room.status.statusName}"></td>
                                        <td th:text="${room.floor.floorId}"></td>
                                        <td th:text="${room.priceDay}">元</td>
                                        <td th:text="${room.priceHour}">￥</td>
                                        <td th:text="${room.memberPriceDay}">￥</td>
                                        <td th:text="${room.memberPriceHour}">￥</td>
                                        <td>
                                            <button type="button" class="btn btn-default btn-updateRoom btn-xs mbs"><i class="fa fa-edit"></i>&nbsp; 修改
                                            </button>&nbsp;
                                            <button type="button"  class="btn btn-danger btn-xs mbs"><i class="fa fa-trash-o"></i>&nbsp; 删除
                                            </button>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                                <div class="row mbm">
                                    <div class="col-lg-6">
                                        <div class="pagination-panel">页码 &nbsp;
                                            <a href="javaScript:void(0)"  class="btn btn-sm btn-default btn-prev gw-prev"><i class="fa fa-angle-left"></i></a>&nbsp;
                                            <input  type="text" maxlenght="5" th:value="${pageInfo.pageNum}" class="pagination-panel-input form-control input-mini input-inline input-sm text-center gw-page">
                                            &nbsp;<a href="#" class="btn btn-sm btn-default btn-prev gw-next"><i class="fa fa-angle-right"></i></a>&nbsp; 共 <span id="page">[[${pageInfo.pages}]]</span>  | 视图 &nbsp;
                                            <select class="form-control input-xsmall input-sm input-inline gw-pageSize">
                                                <option value="5" selected="selected">5</option>
                                                <option value="10" th:selected="${pageSize==10}">10</option>
                                                <option value="20" th:selected="${pageSize==20}">20</option>
                                                <option value="50" th:selected="${pageSize==50}">50</option>
                                                <option value="-1" th:selected="${pageSize==-1}">All</option>
                                            </select>&nbsp; 记录 | 一共找到<span id="total">[[${pageInfo.total}]]</span>项记录</div>
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                                //点击上一页
                                $(".gw-prev").click(function () {
                                    //因为下面要同步 所以就使用jquery

                                    //修改pageNum
                                    var pN = $(".gw-page").val().trim();
                                    var pageNum = parseInt(pN);
                                    if (pageNum==1){
                                        return;
                                    }
                                    $(".gw-page").val(pageNum-1);

                                    var message = $("#form1").serialize();
                                    //console.log(message);
                                    location.href="/room/toRoomSet?pageNum="+(pageNum-1)+"&"+message;

                                    /* console.log(abc);
                                     alert(abc);*/
                                })
                                //点击下一页
                                $(".gw-next").click(function () {
                                    var pN = $(".gw-page").val().trim();
                                    var pageNum = parseInt(pN);
                                    //获得总页数
                                    var page = parseInt($("#page").html());
                                   // alert($("#page").html());
                                    if (pageNum==page){
                                        return;
                                    }
                                    $(".gw-page").val(pageNum+1);
                                    var message = $("#form1").serialize();
                                    console.log(message);
                                    location.href="/room/toRoomSet?pageNum="+(pageNum+1)+"&"+message;
                                })
                                //下拉框change
                                $(".gw-pageSize").change(function () {
                                    //获取下拉框中选中的值
                                    var checkVal = $(this).val();
                                    $(".gw-pageSize").val(checkVal);
                                    $(".gw-page").val(1);
                                    var number = parseInt($(this).val());
                                    //alert(number);
                                    var message = $("#form1").serialize();
                                    //alert("/room/toRoomSet?pageNum="+(1)+"&"+message);//+"&pageSize"+number
                                    //location.href="";
                                    var message = $("#form1").serialize()
                                    location.href="/room/toRoomSet?pageNum=1&"+message+"&pageSize="+number;
                                })
                                //清空表单数据
                                function resetValue(){
                                    //表单重置
                                    location.href="/room/toRoomSet?pageNum=1";
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
            <!--END CONTENT-->
        </div>

        <!--弹窗内容-->

        <div class="mask"></div>
        <div class="dialog">
            <div class="title">
                <img src="/images/room/roomTanC/close.png" alt="点击可以关闭" />删除时提示

                <!--<img src="../../../static/images/room/roomTanC/close.png" height="32" width="34"/>-->
            </div>
            <div class="content">
               <!-- <img src="images/room/roomTanC/delete.png" alt=""/>
               您确定要删除房间号为：<font color="red" style="font-weight: bold">2001号房间</font>的该条记录吗？-->
            </div>
            <div class="bottom">
                <input id="Button2" type="button" value="确定" class="btn2"/>&nbsp;&nbsp;
                <input id="Button3" type="button" value="取消" class="btn3"/>
            </div>
        </div>
        <!--弹窗结束-->

       <style>
        #addRoom{
            position: absolute;left: 0px;
            top: 0px;
            width: 100%;height: 100%;
            background-color: rgba(0,0,0,0.6);

        }
        #addRoom_form{
            background: #eee;
            width: 700px;height: 580px;
            position: absolute;left: 50%; top: 50%;
            margin-left:-300px ;
            margin-top: -240px;
        }
        #addRoom_form_title{
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            position: relative;
            border-bottom: 1px solid black;
        }
        .addRoomMiddel{
            width:610px;
            height: 600px;
            margin-top: 20px;
            margin-left: 30px;
            overflow: hidden;
            /* border: 1px solid black;*/
        }
        .addRoomMiddel_Img {

            width: 250px;
            height: 200px;
            float: left;
            overflow: hidden;
            border: 1px solid black;
        }
        .addRoomMiddel_right{
            width: 310px;
            height: 230px;
            float: left;
            margin-left: 40px;
            overflow: hidden;
            /* border: 1px solid black;*/
        }
        .addRoomMiddel_price{
            width: 620px;
            height: 220px;
            font-size: 22px;
            font-weight: bolder;
            /* border: 1px solid red;*/
        }
        .addRoomMiddel:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
        /*上传图片样式*/
        .addRoomMiddel_Img{
            position: relative;
        }
        #prompt3{
            text-align: center;
            width: 100%;
            height: 100%;
        }
        #prompt3 img{
            display: inline-block;
            text-align: center;
            vertical-align: middle;
        }
        #prompt3 input{
            width: 100%;
            height: 100%;
            /* border: 1px solid black;*/
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }
        .imgClass{
            width: 80px;
            margin-top: 45px;

        }


        .newImgCss{
            display: inline-block;
            width: 100%;
            height: 100%;

        }
        .addRoomMiddel_right{
            font-size: 16px;
            padding-left: 10px;
            padding-top: 30px;
        }
        .input-addRoomMiddel{
            width: 120px !important;
        }
        .addRoomMiddel_price_font{
            color: #0d90d1;
            font-weight: bolder;
            font-size: 16px;
        }
        .input-Price{
            width: 100px !important;
        }
        .addRoomMiddel_price .btn{
            margin-top: 20px;
            margin-left: 120px;
        }
        #imgPoint{
            display: block;
            position: absolute;
            right: 2px;
            top: -10px;
            cursor: pointer;
        }
    </style>
        <!--添加弹窗--><!--style="display: none"-->
        <div id="addRoom" style="display: none">
           <form id="form2">
               <div id="addRoom_form">
                   <div id="addRoom_form_title"><span class="add-room-title">客房新增</span><span id="imgPoint"><img src="/images/room/addRoom/close.png" width="40px"  title="关闭"></span></div>
                   <div class="addRoomMiddel">
                       <div class="addRoomMiddel_Img">
                           <!--  这里用来放上传的图片-->
                           <div id="prompt3">

                               <img  id="img3" class="imgClass" src="/images/room/addRoom/add.png">


                               <input type="file" id="file" class="filepath" th:multiple="multiple"  onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                               <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
                           </div>
                           <div id="addImgHidden">
                           </div>
                       </div>

                       <!--上传图片-->
                       <div class="addRoomMiddel_right">
                           <input  type="hidden" id="u_roomId">
                           <!--隐藏房间类型-->
                           <input type="hidden" name="oldRoomTypeId" id="oldRoomTypeId"/>
                           <!--reserved=null, checkIn=null-->
                           <input type="hidden" name="reserved" id="oldReserved">
                           <input type="hidden" name="checkIn" id="oldCheckIn">

                           <!-- 这里是放下拉框 和 roomId-->
                           <label for="roomId">房间名称:</label>
                           <input type="text" name="roomId" id="roomId" placeholder="请输入房间名称">&nbsp;<span id="roomId_check" class="default_check">*</span>
                           <input type="hidden" id="oldStatusId">
                           <br><br>房间状态：
                           <select id="statusId" th:name="status.statusId"  class="form-control input-addRoomMiddel input-sm input-inline">
                               <option value="">--请选择--</option>
                               <option  th:each="sta:${statusLists}" th:value="${sta.statusId}" th:text="${sta.statusName}"></option>
                           </select>&nbsp;<span id="statusId_check" class="default_check">*</span>
                           <br><br>房间类型：
                           <select id="roomTypeId" th:name="roomType.roomTypeId"  class="form-control input-addRoomMiddel input-sm input-inline">
                               <option value="">--请选择--</option>
                               <option  th:each="rType : ${roomTypeLists}" th:value="${rType.roomTypeId}" th:text="${rType.typeName}"></option>
                           </select>&nbsp;<span id="roomTypeId_check" class="default_check">*</span>

                           <br><br>所在楼层：
                           <select id="floorId" th:name="floor.floorId"  class="form-control input-addRoomMiddel input-sm input-inline">
                               <option value="">&#45;&#45;请选择&#45;&#45;</option>
                               <option   th:each="flr:${floorLists}" th:value="${flr.floorId}" th:text="${flr.floorName}"></option>
                           </select>&nbsp;<span id="floorId_check" class="default_check">*</span>
                           <!--这里放下拉框-->
                       </div>
                       <div style="clear:both"></div>
                       <div class="addRoomMiddel_price">
                           <h5 class="addRoomMiddel_price_font">(普)房间价格</h5>
                           <label for="roomPriceDay">房间价格(每天):</label>
                           <input type="text" name="priceDay" class="input-Price" id="roomPriceDay" placeholder="0.0">&nbsp;<span id="roomPriceDay_check" class="default_check">*</span>

                           <label for="roomPriceHourse">房间价格(小时):</label>
                           <input type="text"  name="priceHour" class="input-Price" id="roomPriceHourse" placeholder="0.0">&nbsp;<span id="roomPriceHourse_check" class="default_check">*</span>


                           <h5 class="addRoomMiddel_price_font">(VIP)房间价格</h5>
                           <label for="roomPriceDay">房间价格(每天):</label>
                           <input type="text" name="memberPriceDay" class="input-Price" id="VIProomPriceDay" placeholder="0.0">&nbsp;<span id="VIProomPriceDay_check" class="default_check">*</span>

                           <label for="roomPriceHourse">房间价格(小时):</label>
                           <input type="text" name="memberPriceHour"  class="input-Price" id="VIProomPriceHourse" placeholder="0.0">&nbsp;<span id="VIProomPriceHourse_check" class="default_check">*</span>
                             <div>
                                <button type="button" class="btn btn-success btn-addRoom">添加客房</button>
                                <!-- 信息警告消息的上下文按钮 -->
                                <button   type="button" class="btn btn-info btn-reset" onclick="resetAddWindow()">重置信息</button>
                              </div>
                       </div>
                   </div>
               </div>
           </form>
        </div>
        <style>

            .default_check{

                display: inline;
                height: 30px;
                line-height: 30px;
                font-size: 15px;
                text-align: left;

                padding: 15px;
                color: red;
            }

            .add_error{
                background: url('../images/error.png') no-repeat left center;
            }
            .tip{
                background: url('../images/tip.png') no-repeat left center;
            }
            .valid{
                background: url('../images/valid.png') no-repeat left center;
            }
        </style>
        <script type="text/javascript">
            //验证表单是否有空值
            var roomId_Boolean = false;
            var status_Boolean = false;
            var roomType_Boolean = false;
            var floor_Boolean = false;
            var roomPriceDay_Boolean = false;
            var roomPriceHouse_Boolean = false;
            var vipPriceDay_Boolean = false;
            var vipPriceHouse_Boolean = false;

            function xiugaiboolean(){
                 roomId_Boolean = true;
                 status_Boolean = true;
                 roomType_Boolean = true;
                 floor_Boolean = true;
                 roomPriceDay_Boolean = true;
                 roomPriceHouse_Boolean = true;
                 vipPriceDay_Boolean = true;
                 vipPriceHouse_Boolean = true;
            }

            //自定义方法；下次做表单时，页面一画完，先做表单验证。
            $('#roomId').blur(function(){
                var room_object = ajax_getRoomInfoById($("#roomId").val());
                console.log(room_object);
                $("#roomId_check").removeClass("valid").removeClass("add_error").html("*");
                if ($("#roomId").val().trim().length >= 4 && room_object == null ){
                    $('#roomId_check').html("").addClass("valid");
                    roomId_Boolean = true;
                }else {
                    $('#roomId_check').html("").addClass("add_error");
                    roomId_Boolean = false;
                }
            });

            $("#statusId").change(function () {
                $("#statusId_check").removeClass("valid").removeClass("add_error").html("*");
                if ($(this).val()!="") {
                    $('#statusId_check').html("").addClass("valid");
                    status_Boolean = true;
                }else {
                    $('#statusId_check').html("").addClass("add_error");
                    status_Boolean = false;
                }
            })

            $("#roomTypeId").change(function () {
                $("#roomTypeId_check").removeClass("valid").removeClass("add_error").html("*");
                if ($(this).val()!="") {
                    $('#roomTypeId_check').html("").addClass("valid");
                    roomType_Boolean = true;
                }else {
                    $('#roomTypeId_check').html("").addClass("add_error");
                    roomType_Boolean = false;
                }
            })

            $("#floorId").change(function () {
                $("#floorId_check").removeClass("valid").removeClass("add_error").html("*");
                if ($(this).val()!="") {
                    $('#floorId_check').html("").addClass("valid");
                    floor_Boolean = true;
                }else {
                    $('#floorId_check').html("").addClass("add_error");
                    floor_Boolean = false;
                }
            })

            $("#roomPriceDay").keyup(function() {
                $("#roomPriceDay_check").removeClass("valid").removeClass("add_error").html("*");
                if ((/^[1-9]\d*$/).test(this.value)) {
                    $('#roomPriceDay_check').html("").addClass("valid");
                    roomPriceDay_Boolean = true;
                }else {
                    $('#roomPriceDay_check').html("").addClass("add_error");
                    roomPriceDay_Boolean = false;
                }
            });

            $("#roomPriceHourse").keyup(function() {
                $("#roomPriceHourse_check").removeClass("valid").removeClass("add_error").html("*");
                if ((/^[1-9]\d*$/).test(this.value)) {
                    $('#roomPriceHourse_check').html("").addClass("valid");
                    roomPriceHouse_Boolean = true;
                }else {
                    $('#roomPriceHourse_check').html("").addClass("add_error");
                    roomPriceHouse_Boolean = false;
                }
            });

            $("#VIProomPriceDay").keyup(function() {
                $("#VIProomPriceDay_check").removeClass("valid").removeClass("add_error").html("*");
                if ((/^[1-9]\d*$/).test(this.value)) {
                    $('#VIProomPriceDay_check').html("").addClass("valid");
                    vipPriceDay_Boolean = true;
                }else {
                    $('#VIProomPriceDay_check').html("").addClass("add_error");
                    vipPriceDay_Boolean = false;
                }
            });

            $("#VIProomPriceHourse").keyup(function() {
                $("#VIProomPriceHourse_check").removeClass("valid").removeClass("add_error").html("*");
                if ((/^[1-9]\d*$/).test(this.value)) {
                    $('#VIProomPriceHourse_check').html("").addClass("valid");
                    vipPriceHouse_Boolean = true;
                }else {
                    $('#VIProomPriceHourse_check').html("").addClass("add_error");
                    vipPriceHouse_Boolean = false;
                }
            });

            function removeClass(){
                $("#VIProomPriceHourse_check").removeClass("valid").removeClass("add_error").html("*");
                $("#VIProomPriceDay_check").removeClass("valid").removeClass("add_error").html("*");
                $("#roomId_check").removeClass("valid").removeClass("add_error").html("*");
                $("#statusId_check").removeClass("valid").removeClass("add_error").html("*");
                $("#floorId_check").removeClass("valid").removeClass("add_error").html("*");
                $("#roomTypeId_check").removeClass("valid").removeClass("add_error").html("*");
                $("#roomPriceDay_check").removeClass("valid").removeClass("add_error").html("*");
                $("#roomPriceHourse_check").removeClass("valid").removeClass("add_error").html("*");
            }
            function addClass(){
                $("#VIProomPriceHourse_check").addClass("valid").removeClass("add_error").html("");
                $("#VIProomPriceDay_check").addClass("valid").removeClass("add_error").html("");
                $("#roomId_check").addClass("valid").removeClass("add_error").html("");
                $("#floorId_check").addClass("valid").removeClass("add_error").html("");
                $("#statusId_check").addClass("valid").removeClass("add_error").html("");
                $("#roomTypeId_check").addClass("valid").removeClass("add_error").html("");
                $("#roomPriceDay_check").addClass("valid").removeClass("add_error").html("");
                $("#roomPriceHourse_check").addClass("valid").removeClass("add_error").html("");
            }
            //是否是图片
            //名称长度
            //房间状态  类型 楼层是否选择
            //房间价格是否输入的数字
            $(function () {
                //点击添加或者修改
                $(".btn-addRoom").click(function () {
                   // alert($("#roomTypeId").val());

                    //在这里验证是否继续下去
                    if (roomId_Boolean && status_Boolean && roomType_Boolean && floor_Boolean && roomPriceDay_Boolean && roomPriceHouse_Boolean && vipPriceDay_Boolean && vipPriceHouse_Boolean == true){
                        //成功
                       // console.log("没有拦截到");
                        oldRoomTypeId  = $("#oldRoomTypeId").val();
                        var data = $("#form2").serialize()+"&oldRoomTypeId="+oldRoomTypeId+"&oldStatusId="+$("#oldStatusId").val();
                        var btnValue = $(".btn-addRoom").html();
                        console.log(data);
                        console.log(btnValue);
                        var url = "/room/updateRoom";
                        var shuchu = "修改";
                        //获取按钮的值判断使用某个值
                        if (btnValue == "添加客房"){
                            url = "/room/addRoom";
                            shuchu = "添加"
                            ajax_addRoomInfo(url,data,shuchu);
                        }
                        if (btnValue=="修改客房"){
                            data+= "&roomId="+$("#u_roomId").val();
                            console.log(data);
                            ajax_addRoomInfo(url,data,shuchu);
                            //guanbiWindon();

                        }
                    }else {
                        alert("请完善信息");
                    }

                })


                //点击页面修改按钮
                $(".btn-updateRoom").click(function () {
                    //添加样式/*修改update窗口*/
                    removeClass();
                    addClass();
                    //都设置为true
                    xiugaiboolean();
                    //向上滑动
                    $('html').animate(
                        { scrollTop: '0px' },0
                    );
                    $("#addRoom_form_title .add-room-title").html("客房修改");
                    $(".btn-addRoom").html("修改客房");
                    $("#addRoom").css("display","block");
                    // $("")

                    //根据Id查询原来的数据，利用ajax获得的值，然后在绑定起来
                    var roomId = $(this).parent().siblings().eq(1).html();
                    bangValue(roomId);
                })
            })
            function ajax_addRoomInfo(url,data,shuchu){
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: url ,//url
                    data: data,
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        if (result.success) {
                           alert(shuchu+"成功");
                            resetAddWindow();
                        }else{
                            alert(shuchu+"失败");
                        };
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
            }

            //传图片
            function changepic(fileElm) {
                lrz(fileElm.files[0]).then(function(resultObj){
                       //console.log(resultObj.base64);
                      // alert("看看是什么");
                       console.log(resultObj.base64);
                    document.getElementById('img3').src = resultObj.base64;

                    $("#img3").removeClass("imgClass");
                    $("#img3").addClass("newImgCss");
                    $("#img3").css("display", "block");
                    $("#addImgHidden").empty();
                    $("#addImgHidden").append("<input type='hidden' name='imgBase64' value='"+ resultObj.base64 +"'/>");
                });
            }

            //打开弹框
            function openAddRoom() {

                removeClass();
                //添加样式z
                $("#addRoom_form_title .add-room-title").html("客房新增");
                $(".btn-addRoom").html("添加客房");
                $("#addRoom").css("display","block")
            }
            $("#imgPoint").click(function () {

                $("#addRoom").css("display","none");
                resetAddWindow();

                //alert(number);
                var message = $("#form1").serialize();
                location.href="/room/toRoomSet?pageNum=1&"+message;
            })

            function guanbiWindon() {
                $("#addRoom").css("display","none");
                resetAddWindow();
                resetValue();
            }
           //重置添加窗口
            function resetAddWindow(){
                removeClass();
                //表单重置
                $("#form2")[0].reset();
                //将id中的input窗口修改为可改
                $("#roomId").removeAttr("disabled");
                //将照片移除
                $("#img3").prop("src","/images/room/addRoom/add.png");
                $("#img3").removeClass("newImgCss");
                $("#img3").addClass("imgClass");
                $("#img3").css("display","inline");
            }







            /**
             * 将值绑定到修改页面
             * @param roomId
             */
             function bangValue(roomId) {
                    //调用之前的查询
                 var room = ajax_getRoomInfoById(roomId);
                 //绑定Img
                $("#img3").prop("src","/static/upload/roomImgs/"+room.roomImage);
                console.log($("#img3").prop("src"))
                $("#img3").removeClass("imgClass");
                $("#img3").addClass("newImgCss");
                $("#img3").css("display", "block");
                //alert(room.roomId);
                //绑定名称
                $("#roomId").val(room.roomId);
                //在隐藏的位置绑定值
                $("#u_roomId").val(room.roomId);

                $("#u_oldRoomTypeId").val();
                $("#roomId").attr("disabled","disabled");
                //绑定下拉框
                $("#statusId").val(room.status.statusId);
                $("#oldStatusId").val(room.status.statusId);
                //在这里绑定一个input隐藏域 方便后台决定是否修改类型表
                $("#roomTypeId").val(room.roomType.roomTypeId);
                $("#oldRoomTypeId").val(room.roomType.roomTypeId);
                $("#floorId").val(room.floor.floorId);

                //绑定房间价格
                $("#roomPriceDay").val(room.priceDay);
                $("#roomPriceHourse").val(room.priceHour);
                $("#VIProomPriceDay").val(room.memberPriceDay);
                $("#VIProomPriceHourse").val(room.memberPriceHour);
             }
        </script>
        <!--操作删除弹框-->
        <script type="text/javascript">
            $(function() {
                //要删除的值
                var roomId=null;
                $(".btn-danger").click(function() { //注册删除按钮点击事件
                    roomId = $(this).parent().siblings().eq(1).html();
                    appendContent(roomId);
                    $(".mask").show(); //显示背景色
                    showDialog(); //设置提示对话框的Top与Left
                    $(".dialog").show(); //显示提示对话框
                })
                //拼接content的内容
                function appendContent(roomId) {
                    $(".content").empty();
                    var html = "<img src='/images/room/roomTanC/delete.png' alt=\"\"/>"
                    html += "您确定要删除房间号为:"
                    html += "<font color='red' style='font-weight: bold'>";
                    html += roomId+'号房间';
                    html += "</font>的该条记录吗？"
                    $(".content").append(html);
                }
                /*
                *根据当前页面与滚动条位置，设置提示对话框的Top与Left
                */
                function showDialog() {
                    var objW = $(window); //当前窗口
                    var objC = $(".dialog"); //对话框
                    var brsW = objW.width();
                    var brsH = objW.height();
                    var sclL = objW.scrollLeft();
                    var sclT = objW.scrollTop();
                    var curW = objC.width();
                    var curH = objC.height();
                    //计算对话框居中时的左边距
                    var left = sclL + (brsW - curW) / 2;
                    //计算对话框居中时的上边距
                    var top = sclT + (brsH - curH) / 2;
                    //设置对话框在页面中的位置
                    objC.css({ "left": left, "top": top });
                }

                $(window).resize(function() {//页面窗口大小改变事件
                    if (!$(".dialog").is(":visible")) {
                        return;
                    }
                    showDialog(); //设置提示对话框的Top与Left
                });

                $(".title img").click(function() { //关闭图片点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button3").click(function() {//取消按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                })

                $("#Button2").click(function() {//确定按钮点击事件
                    $(".dialog").hide();
                    $(".mask").hide();
                    //在这里执行操作
                    var dateRoom = ajax_getRoomInfoById(roomId);
                    if (dateRoom.status.statusId==1){
                        alert("当前房间有人居住");
                    } else if (dateRoom.status.statusId==2){
                        alert("当前房间已经预定");
                    } else{
                        ajax_deleteRoom(roomId);

                    }
                    // alert(dateRoom.status.statusName);//删除某行数据


                })

            })
            //这里jquery查询数据
            function ajax_getRoomInfoById(roomId){
                var url = "/room/getRoomInfo";
                var params = "roomId="+roomId;

                $.ajax({
                    async:false,
                    url: url,
                    data:params,
                    type: "POST",
                    dataType: "json",
                    success: function(result){
                        check_res=result;
                    },error:function(){}
                });
                return check_res;
            }
            //在这里执行删除命令
            function ajax_deleteRoom(roomId) {
                var url = "/room/toDeleteRoomInfo";
                var params = "roomId="+roomId;

                $.ajax({
                    async:false,
                    url: url,
                    data:params,
                    type: "POST",
                    dataType: "json",
                    success: function(result){
                        //console.log(result.success);
                        if (result.success){
                            alert("删除成功！");
                            var message = $("#form1").serialize()
                            location.href="/room/toRoomSet?pageNum=1&"+message;
                        } else {
                            alert("删除失败！");
                        }
                    },error:function(){}
                });

            }
        </script>
        <!-- 这里是底部 -->
        <!-- 引用底部 -->
        <div th:replace="common/bottom::bottom"></div>
        <!--END FOOTER-->
        <!--END PAGE WRAPPER-->
    </div>
</div>
<!--修改左上角的面包屑-->
<script>
    $(function () {
        $("#breadAppend").append('<i class="fa fa-home"></i> <a href="#">房间管理</a> <i class="fa fa-angle-right"></i> <a href="#">房间设置</a>');
        $("#room").addClass("active");
    })
</script>
<!-- 引用脚本 -->
<div th:replace="common/script::script"></div>
</body>
</html>